import React, { useState } from 'react';
import { Calendar, Clock, Video, Users, Plus, Filter, ChevronLeft, ChevronRight, MapPin, Mail, Phone } from 'lucide-react';

interface Interview {
  id: string;
  candidateName: string;
  candidateAvatar: string;
  position: string;
  date: string;
  time: string;
  duration: number;
  type: 'online' | 'offline';
  location?: string;
  meetingLink?: string;
  interviewers: string[];
  status: 'scheduled' | 'completed' | 'cancelled';
  notes?: string;
}

const mockInterviews: Interview[] = [
  {
    id: '1',
    candidateName: '张三',
    candidateAvatar: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=32&h=32&fit=crop&crop=face',
    position: '前端工程师',
    date: '2024-01-25',
    time: '10:00',
    duration: 60,
    type: 'online',
    meetingLink: 'https://meet.example.com/abc123',
    interviewers: ['李经理', '王总监'],
    status: 'scheduled'
  },
  {
    id: '2',
    candidateName: '李四',
    candidateAvatar: 'https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=32&h=32&fit=crop&crop=face',
    position: 'Java工程师',
    date: '2024-01-25',
    time: '14:00',
    duration: 90,
    type: 'offline',
    location: '北京办公室 - 会议室A',
    interviewers: ['陈技术总监'],
    status: 'scheduled'
  },
  {
    id: '3',
    candidateName: '王五',
    candidateAvatar: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=32&h=32&fit=crop&crop=face',
    position: 'UI设计师',
    date: '2024-01-24',
    time: '16:00',
    duration: 45,
    type: 'online',
    meetingLink: 'https://meet.example.com/def456',
    interviewers: ['设计主管'],
    status: 'completed',
    notes: '候选人表现优秀，设计理念很好，推荐进入下一轮。'
  }
];

export default function Interviews() {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedInterview, setSelectedInterview] = useState<Interview | null>(null);
  const [view, setView] = useState<'calendar' | 'list'>('list');

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'scheduled': return 'bg-blue-100 text-blue-800';
      case 'completed': return 'bg-green-100 text-green-800';
      case 'cancelled': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'scheduled': return '已安排';
      case 'completed': return '已完成';
      case 'cancelled': return '已取消';
      default: return status;
    }
  };

  const todaysInterviews = mockInterviews.filter(interview => 
    interview.date === '2024-01-25'
  );

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="sm:flex sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">面试与邮件</h1>
          <p className="mt-2 text-sm text-gray-700">
            管理面试日程和邮件模板
          </p>
        </div>
        <div className="mt-4 sm:mt-0 flex items-center space-x-3">
          <div className="flex rounded-lg border border-gray-300">
            <button
              onClick={() => setView('list')}
              className={`px-4 py-2 text-sm font-medium rounded-l-lg ${
                view === 'list' ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-50'
              }`}
            >
              列表视图
            </button>
            <button
              onClick={() => setView('calendar')}
              className={`px-4 py-2 text-sm font-medium rounded-r-lg border-l ${
                view === 'calendar' ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-50'
              }`}
            >
              日历视图
            </button>
          </div>
          <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
            <Plus className="h-4 w-4 mr-2" />
            安排面试
          </button>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left column - Interview list or calendar */}
        <div className="lg:col-span-2">
          {view === 'list' ? (
            <div className="bg-white rounded-lg shadow-sm border border-gray-200">
              <div className="p-6 border-b border-gray-200">
                <div className="flex items-center justify-between">
                  <h2 className="text-lg font-medium text-gray-900">近期面试</h2>
                  <div className="flex items-center space-x-2">
                    <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg">
                      <Filter className="h-4 w-4" />
                    </button>
                  </div>
                </div>
              </div>
              
              <div className="divide-y divide-gray-200">
                {mockInterviews.map((interview) => (
                  <div
                    key={interview.id}
                    onClick={() => setSelectedInterview(interview)}
                    className={`p-6 cursor-pointer hover:bg-gray-50 transition-colors ${
                      selectedInterview?.id === interview.id ? 'bg-blue-50 border-r-4 border-blue-500' : ''
                    }`}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-4">
                        <img
                          className="h-10 w-10 rounded-full"
                          src={interview.candidateAvatar}
                          alt={interview.candidateName}
                        />
                        <div>
                          <h3 className="text-lg font-medium text-gray-900">{interview.candidateName}</h3>
                          <p className="text-sm text-gray-500">面试：{interview.position}</p>
                        </div>
                      </div>
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(interview.status)}`}>
                        {getStatusText(interview.status)}
                      </span>
                    </div>
                    
                    <div className="mt-4 grid grid-cols-2 gap-4">
                      <div className="flex items-center text-sm text-gray-500">
                        <Calendar className="h-4 w-4 mr-2" />
                        {interview.date} {interview.time}
                      </div>
                      <div className="flex items-center text-sm text-gray-500">
                        <Clock className="h-4 w-4 mr-2" />
                        {interview.duration}分钟
                      </div>
                      <div className="flex items-center text-sm text-gray-500">
                        {interview.type === 'online' ? (
                          <>
                            <Video className="h-4 w-4 mr-2" />
                            线上面试
                          </>
                        ) : (
                          <>
                            <MapPin className="h-4 w-4 mr-2" />
                            {interview.location}
                          </>
                        )}
                      </div>
                      <div className="flex items-center text-sm text-gray-500">
                        <Users className="h-4 w-4 mr-2" />
                        {interview.interviewers.join('、')}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            // Calendar view placeholder
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
              <Calendar className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">日历视图</h3>
              <p className="text-sm text-gray-500">日历视图功能开发中...</p>
            </div>
          )}
        </div>

        {/* Right column - Interview detail */}
        <div>
          {selectedInterview ? (
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-lg font-medium text-gray-900">面试详情</h2>
                <div className="flex items-center space-x-2">
                  <button className="px-3 py-1.5 text-sm text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors">
                    编辑
                  </button>
                  <button className="px-3 py-1.5 text-sm text-red-600 border border-red-600 rounded-lg hover:bg-red-50 transition-colors">
                    取消
                  </button>
                </div>
              </div>
              
              <div className="space-y-6">
                <div className="flex items-center space-x-4">
                  <img
                    className="h-12 w-12 rounded-full"
                    src={selectedInterview.candidateAvatar}
                    alt={selectedInterview.candidateName}
                  />
                  <div>
                    <h3 className="text-lg font-medium text-gray-900">{selectedInterview.candidateName}</h3>
                    <p className="text-sm text-gray-500">面试：{selectedInterview.position}</p>
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div>
                    <h4 className="text-sm font-medium text-gray-900 mb-2">面试时间</h4>
                    <div className="flex items-center text-sm text-gray-700">
                      <Calendar className="h-4 w-4 mr-2" />
                      {selectedInterview.date} {selectedInterview.time}
                    </div>
                    <div className="flex items-center text-sm text-gray-700 mt-1">
                      <Clock className="h-4 w-4 mr-2" />
                      预计时长：{selectedInterview.duration}分钟
                    </div>
                  </div>
                  
                  <div>
                    <h4 className="text-sm font-medium text-gray-900 mb-2">面试方式</h4>
                    {selectedInterview.type === 'online' ? (
                      <div>
                        <div className="flex items-center text-sm text-gray-700 mb-2">
                          <Video className="h-4 w-4 mr-2" />
                          线上面试
                        </div>
                        {selectedInterview.meetingLink && (
                          <a
                            href={selectedInterview.meetingLink}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-sm text-blue-600 hover:text-blue-700 underline"
                          >
                            加入会议
                          </a>
                        )}
                      </div>
                    ) : (
                      <div className="flex items-center text-sm text-gray-700">
                        <MapPin className="h-4 w-4 mr-2" />
                        {selectedInterview.location}
                      </div>
                    )}
                  </div>
                  
                  <div>
                    <h4 className="text-sm font-medium text-gray-900 mb-2">面试官</h4>
                    <div className="flex items-center text-sm text-gray-700">
                      <Users className="h-4 w-4 mr-2" />
                      {selectedInterview.interviewers.join('、')}
                    </div>
                  </div>
                  
                  <div>
                    <h4 className="text-sm font-medium text-gray-900 mb-2">状态</h4>
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(selectedInterview.status)}`}>
                      {getStatusText(selectedInterview.status)}
                    </span>
                  </div>
                  
                  {selectedInterview.notes && (
                    <div>
                      <h4 className="text-sm font-medium text-gray-900 mb-2">面试备注</h4>
                      <p className="text-sm text-gray-700 bg-gray-50 p-3 rounded-lg">
                        {selectedInterview.notes}
                      </p>
                    </div>
                  )}
                </div>
                
                <div className="pt-4 border-t border-gray-200 space-y-2">
                  <button className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
                    <Mail className="h-4 w-4 mr-2" />
                    发送面试邀请
                  </button>
                  <button className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center">
                    <Phone className="h-4 w-4 mr-2" />
                    联系候选人
                  </button>
                </div>
              </div>
            </div>
          ) : (
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
              <Calendar className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">选择面试查看详情</h3>
              <p className="text-sm text-gray-500">点击左侧面试项目查看详细信息</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}